李烨编 人民邮电 2008.10
2017.6.24 六 am
第一部分：web标准 1，2
第二部分：css2.1详解
第三部分：实例 17
第1章 Web标准概述
1.1 Web标准概述
W3c—万维网联盟+其他（ecma）
结构：主要包括xhtml,xml，
表现:css，
行为:
1.2表现与结构的分离
1.3易用性：避免框架、表单、javascript和cookies
1.4难点所在：
1，div+css不等于web标准
2，正确使用xhtml标签
3，表格本身并没有被抛弃
4，善于利用css
5，不要滥用class
6，应对浏览器
7，“通过验证”并不是最终目的
1.5 SEO简介
17点：
静态页面，页面标题，meta标签优化，针对google制作sitemaps，图片的关键词优化，
避免表格的嵌套，采用web标准进行网站重构，网站结构的扁平化规划，页面容量的合理化
外部文件策略，外包链接（PR值），网站地图，图像热点，flash应用，js脚本，frame框架，资讯的内部链接
盒模型的七个参数？？
（本书html4.0，html5.0 在研发中）
第2章 结构与XHTML
2.1 理解结构与表现
2.2 从html到xhtml
网页是由超文本标记语言（html）构成的
2.2.1 Html简史
1，Html特点：（设计者（本尼斯李）考虑1989：独立于平台，超文本，精确的结构化文档
所以用 SGML（标准通用标记语言）做为html的开发模版 （html 1.0）
SGML：具有结构化和独立于平台的优点，标准化—相当长时间内不需要重新构建
1独立于平台，因为它对文档的语义结构或含义进行编码描述，而不是对文档的实际外观进行编码描述。
2另一个特征，按语义编码的文本可以由计算机更智能地自动处理
3一大优点—灵活性。（sgml，..本身并不是一种格式，而是定义其他格式的一种规范，。。任何使用sgml的软件都能读懂它。–人们定义了许多文档类型DTD，html只是一种DTD，或者SGML的应用
89以来，html及万维网变化巨大，NCSA（美国国家超级计算机应用中心）1993首次构建mosaic浏览器时，把自己需要的特性添加到html中，包括直接插入图形
2，1994，html失控发展。IETF主持，1995.11日内瓦 成立了HTML工作小组，把html形式化成一种SGML DTD （html 2.0）
3，万维网联盟html工作组，集中了1996年万维网发展成功， HTML 3.2
4，HTML 4.0 继承以往版本的所有特点，并发展
2.2.2 html的缺点
5，w3c，又制定了XHTML：html向xml过渡的桥梁，一种增强了的html
XML是web发展的趋势，XHTML 1.0当前替代html 4.0标记语言的标准。。既适合XML系统，又大部分HTML浏览器页面，这个指导方针可以使web平滑的过渡到XML
另一个优势非常严密，同时xhtml能与其他基于xml的标记语言、应用程序以及协议进行良好的交互工作。Xhtml是web标准家族的一部分。。。
2.2.3从html到xhtml
1，选择DTD定义文档的类型<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 三种DTD声明可供选择：Transitional Strict Frameset
2,设定一个名字空间 <html XMLns=”http://www.w3.org/1999/xhtml”>
Xml允许定义自己的标签，制定者定义的标签可能和其他人定义的标签可能相同，但不同的意义。当交互或共享容易错误，..
XHTML,需要符合XML文档的规则，也需要定义名字空间。不能自定义，都是相同的..
3,定义语言编码 <meta http-equiv=”Content-Type” content=”text/html;charset=GB2312/>
4,一定要正确的嵌套使用
5，一定要有正确的组织结构
6，标签名字一定要用小写字母 XML对大小写敏感
7，一定要关闭 <img/>
8,属性名字必须小写
9，属性值必须带 英文双引号
10，属性的简写被禁止 html中是可以的 checked vs checked=”checked”
11,id属性代替name属性 xhtml除了表单form, 链接a ，name属性不能使用
12,内容文字注意转义 & < > “ 版权© 注册®
13,xml:lang和lang属性(html格式，两个同时用)
< html xmlns=http://www.w3.org/1999/xhtml lang=”zh-CN” xml:lang=”zh-CN”>
2.3理解（X）HTML标签的语义
2.3.1 浏览器默认样式
实际3个样式：制作者>用户>浏览器默认
2.3.2 常用标签和属性
H1~h6 p ul,ol,li dl,dt,dd em,strong table,td ,th, caption,summary属性，
q,blockquote,cite和cite属性 ins,del dfn,code,samp,kbd,var,address abbr,acronym
11title属性（为元素提供额外说明信息）（？？如果同时设置，不同浏览器表现）
alt属性（为不能显示图像，窗体或applets的用户端指定替换文字，语言由lang指定）
12表单form,input,textarea,select,optgroup,option,button,label,fieldset,legend
13 div,span
2.3.3 （x）html各个元素对搜索引擎的权重比例
10分：内部链接文字，title元素 7分：域名
5分：h1,h2 每段首句， 4分：路径或文件名，相似度（关键词堆积）
1.5分：每句开头 1分：加粗或斜体，文本用法（内容），title属性
0.5分：图片的alt属性，meta描述（description属性）
0.05分：meta关键词（keywords属性）
（？现在还是这样吗）
2.4网站整体制作基本流程
第2部分 层叠样式表CSS
第3章 css入门
3.1 css简介
3.1.1起源
1990年代初htm被发明开始，样式表就以各种形式出现
1994 F提出css 。1996。12 css 1 1998.5 css2 本书完稿时css 3还在开发中
3.1.2 神奇的css css禅意花园—css zen garden
3.1.3 css与html
3.1.4 css与浏览器 拥有最多用户的windows ie（包括ie7.0）却并没有完全支出css2.1-hack
3.1.5 css 2.1与css 2
3.2 css的使用方法
3.2.1 行内
3.3.2 嵌入
3.2.3 外部<link rel=”stylesheet” href=”basic.css” type=”text/css” media=”all”>
Rel：定义了文档与链接的关系， （stylesheet：样式表）
Media：可选属性，值：screen,print,projection(投影)，speech(屏幕阅读器等发生设备)，braille（盲文触摸式反馈设备）,embossed（用于打印的盲人印刷设备）,handheld(手持设备)
Tty,tv,all
3.2.4 导入式样式表
@import 好处：一些老的浏览器（netscape 4.X）不接受，进而不接受规则
因此，要写在样式表文件的最开始
Window ie，使用导入式样式表，有可能会出现文档样式暂时失效的现象（导入样式的style标签前插入一个空的script标签，或者也可以使用link标签引入外部样式表）
3.2.5 应用
3.2.6 维护和组织样式表
3.3 基本样式规则
3.3.1 基本语法
3.3.2 继承与层叠
3.3.3 分组：分组选择器，分组声明，组合应用
3.3.4 注释
3.3.5 缩写：Css属性缩写，颜色值缩写，利用继承，0px与0
3.3.6 注意事项：空格，大小写敏感，容错
3.4 元素类型
3.4.1 替换和不可替换元素：Img,input,textarea,select,object p
3.4,2 显示元素（另一种分类方式）（display属性）
块级:div,p,h1~h6 一般都是不可替换元素 float，block，list-item
行内：img,input inline
3.5 媒体类型
1.指定媒体相关的样式表
1，样式表 @import url(“ “) aural; 或者 @media print{… }
2，文档语言中指定 <link rel=”stylesheet” href=” “ type=”text/css” media=”print,screen”/>
2.媒体组：连续媒体，视觉，栅格，交互，all
第4章 文档结构与选择器
1 文档结构 css大部分能力是基于元素的“父子”关系，有时候一般化为祖先和后代，兄弟
2 css选择器 （css 2.1 。。，但是由于一些浏览器只支持其中一部分，大打折扣）
通配选择器，类型，ID（虽然重复的id不会报错，但是js操作），类，包含（后代），
（—上面的都支持，下面的ie7，ff2.0 o8.5支持，ie6不支持（可针对ie6做处理）—）
子元素>，相邻兄弟+，属性（简易，精确值，部分值，特殊–（和现在学的稍微有些不一样））
3 伪类与伪元素
3.1伪类：链接：link，visited 动态：hover，active，focus（ie6只支持a的hover）多种
子元素：first-child（ie6不支持）语言:lang(en){… }（ie7）
3.2 伪元素：
first-line：只可以和块级连用，特性和行内元素类似。字体、颜色、背景、word-spacing、letter-spacing、text-decoration、vertiack-align、text-transform、line-height、text-shadow、clear
fisrst-letter: 和行内元素类似。字体、颜色、背景、letter-spacing、vertiack-align（仅当不浮动时）、text-transform、line-height、margin、padding、border、float、letter-spacing、word-spacing、text-shadow、clear （如果出现标点符号也包括在内）
before,after: 必须和css的content属性配合使用 （ie7 不支持）
3.3 注意：
链接伪类顺序：lvha
位置：伪类选择器任何位置，伪元素选择器主体之后p:first-letter:hover,div:first-line a错的
4 指定值、计算值和实际值
制定者不必定义每一个，解释网页的（浏览器）必须为文档树每个元素每个属性一个值
一个属性最终值4步计算：指定值—（用以继承的）计算值—（如果需要转为绝对）使用值—（依照局部的环境限定）实际值
5 继承
5.1 值的继承：color，font-size
5.2 inherit值 只用作后备值，显示地指定inherit p { font-size: inherit; }
5.3 继承的局限性：border,marging,padding,背景不继承，浏览器默认也影响继承的结果（老）
6层叠
6.1 层叠的顺序
层叠规则依据下面几个步骤进行
1， 查找有冲突的元素
2， 样式表的来源：用户的重要性》制定者的重要性》制定者定义》用户定义》浏览器默认。。。
制定者定义css文件引入的规则取决于顺序。（样式表中使用@优先级，同样适用）。
行内》嵌入》从文件引入
3， 选择器的特殊性：声明的第二排序基于选择器的特殊性
4， 规则出现的先后次序：相同的权重，相同的来源，相同的特殊性
6.2特殊性的计算—-0，0，0，1 1，2，4，4 a,b,c,d 忽略伪元素
6.3 继承和特殊性 继承0
6.4 重要性 import高于内联式（？？那行内呢）
6.5 非css的表现类内容:font标签，align属性
7 css 3新增选择器前瞻
7.1 更多的属性选择器 ^ $ *
7.2 普通兄弟 ~
7.3 结构伪类：root，nth-child(n)（从1开始），nth-last-child(n) nth-of-type(n) nth-last-of-tyoe(n) last-child first-of-type last-of-type only-child only-of-type empty
7.4 UI元素伪类和伪元素 :enabled disabled checked ::selection
7.5 其他 否定not(s) 目标 target
8 命名规范
注意名称的语义、使用有意义的单词、分段书写（驼峰、帕斯卡、下划线、连字符）
9 选择器综合运用
不要过于复杂，只要能生效 如果通过包含选择器，一般没必要添加类或者id
2017.6.24 六 23：00
第5章 单位和值
1 颜色
1.1 颜色关键字：css 2 16个关键字。Orange—css 2.1新增
显示设备、操作系统、显示卡、浏览器不同；
（8位真彩色：256种颜色；24-1600万中）
1.2 RGB颜色：（同显示器原理）百分比，数字，十六进制
1.3 关键字transparent：边框也可，默认有color属性指定。
好像：Ie6无，ie7但是有px的距离
1.4网页安全色：216网页安全色。当r，g，b颜色数字信号值（DAC count）为0，51，102，153，204，255构成的组合，66*6=216，210中彩色（转15：00，33，66，99，CC,FF）
2整数值和实数值:前缀+，—；很多会有取值范围
3 长度
3.1 格式
3.2 单位：对计算机的屏幕设备，px是一个最基本单位（都换为px显示）；其他设备可能不是px
1，绝对：in=2.54cm，1cm=0.394in；mm；72pt=1in，印刷；12点活字，pica=12pt，6pica=1in
（如果不被支持，用户端近似实际值）
2，相对：em，ex ，（和字体尺寸相关）；px
Pixel：picture element 用来计算数位影像的一种单位。那么多少个像素等于1英寸呢？
和显示器的PPI相关。（DPI，印刷上的计量单位：每平方英寸上，所印刷的网点数dot per inch），但在与电脑结合。。大多数人将数位影像的解析度用DPI表示，印刷-网点dot和电脑显示的像素pixel并不同，专业人士用ppi表示数位解析度，借以区分二者。
Windows默认96ppi，mac os 71ppi。。css2 规范90ppi。实际应用中，浏览器往往会使用显示器的设置，但在其他设备中结果就不尽相同了。图片尺寸一般px
3.3 应用 绝对—打印设备；显示器—建议相对
4百分比
参考值：1同一元素的另外一个属性的值font-size:10pt;line-height:120%;==10pt*120=12pt；2 其祖先元素的属性值；3格式化上下文的值。。。子元素通常继承其父元素的计算值
5 关键字：以标识符形式出现，不可以放在引号之间
6 字符串：引号中。（再次出现要转义\”===\22,\’===\27）。不可以直接包含新行，转义\00000a,\A
7 URL+URN=URI :统一资源。。web地址的基本形式是URI
url：普遍， 。不仅标识资源，而且指出访问资源的方式（比如协议：http,ftp）,urn没有
urn：url的更新形式，不依赖于位置，并可能减少失效连接的个数
uri，( ) , 空白字符 ‘ “ 六个转义 (===%28 )===%29
8 其他值：大部分应用在其他设备
8.1 计数器counter：只可以由content属性引用
8.2 角度angle：deg（度） ，grad（梯度），rad（弧度） 90度=100梯度=1.57。。。。。弧度
8.3 时间：ms s，不可以为负数
8.4 频率：使用在语音样式表中，实数+单位Hz，kHz。不可以负数
9不支持的值的处理 display:run-in 忽略
第6章字体
字体：font，字面：face；字体集：font family；磅值：weight；样式：style—三种字形roman type，oblique type，utakuc type
1 字体集 font-famliy 继承
英文字体一般有若干系列字体组成。。每一个字体集又包括黑，粗，斜各种风格的字体成员
1.1 语法：多个用逗号隔开，含有空格用引号，中文字体用引号
访问者计算机是否安装，最好常见的TrueType字体（applecomputer，microsoft联合），如：New Roman,Courier,Verdana,Century Gothic, 中文操作系统windows自带宋体、黑体、楷体
字体名并不是随便输入的，在各个操作平台上的名称可能不一样。Windows—应用软件，mac—打开系统文件夹
1.2 常用字体系列：Times字体系列、04字体系列（网页设计中很著名）
除了设计者定义，css也定义几个一般的字体系列
1，Serif字体：Times New Roman, 宋体，细明体（繁体常用）。成比例有衬线。比较容易阅读
2，Sans Serif字体：Arial， 黑体 适合标题字，不适合大面积文字，因为容易造成字母辨认困扰
3， Monospace字体：Courier New，无比例，模拟打印字或者程序代码。等宽，易辨认，美观差
4， Cursive字体：ComicSans，模拟你手写的草体文字 不鼓励使用
5， Fantasy字体：WingDings，Symbol。更多是通过说明他不属于某个范畴（其他4）来定义
2 字体尺寸：font-size 继承
很多其他属性设定，可以以字体大小为基础达到弹性设计的目的
2.1 语法：与浏览器显示出来的实际大小，取决于字的“全身方框”
2.2 绝对尺寸：
2.3 相对尺寸
2.4 百分比和em
2.5 尺寸的继承与浏览器的显示：继承的是计算值，不是百分比；不能是小数，不同计算机不同的处理方式；奇数尺寸的字在横向可能会有变形
2.6 分辨率（dpi）与弹性设计：避免单位混用；美观、易控制-px；但是。。。尽量百分比，关键字
3 字体磅值：font-weight 继承
3.1 语法
3.2 继承
3.3 浏览器显示原理
1，9个级别的关键字：
2，bolder，lighter
4 字体样式：font-style 继承 normal,italic,oblique
5 字体变形：font-variant 继承 normal，small-caps, 有些字体提供小型大写字母
6 缩写的字体属性：font
(style/variant/weight)? size (/line-height)? Family (系统字体)
7 调整与拉伸：font-size-adjust font-stretch css 2中，css 2.1 又删除了
8 字体匹配原理：很复杂的过程
8.1 匹配步骤
8.2 设定字体集注意事项：建议定义多个；最好指定一种常用字体系列；可以只定义一个字体系列，而不指定具体的字体名
8.3 字体的选择：一个文档里指定字体选择行为有4中：名字匹配、只能匹配、综合、下载
8.4 @font-size规则：css2，css2.1 又删了 （现在不是又有了吗）
（00：51）
2017.6.27 二 21：27
第7章 文本
1 水平对齐：text-align 继承 块级
Left，right，center，justify—因浏览器而异
继承—不同B有差别：Opera
1.4 应用：整体居中。IE5.5 后，加wrapper，margin：0 auto；
2 文本缩进：text-indent 继承 块级
2.2 正值缩进 百分比基数 由父元素的宽度，而不是元素本身的宽度
2.3 负值缩进：悬挂缩进和隐藏文字 溢出部分情况根据元素及祖先元素overflow
2.4 应用：隐藏单行文字 （‘类似logo’）直接img 违背了“表现与结构分离”
3 行高 line-height 继承
行高：文本行的基线（英文字母x）间距离，文本间空白距离不仅仅行高决定，同时也受字号的影响
3.2 内容区域：理论上一行中每个元素都有一个内容区域，由字体尺寸决定
行内框：行内元素会生成一个，只是一个概念。无其他影响，行内框==内容区域。设定行会对其产生影响
行框：任何，故同一行内若干元素，不同行框，行内框。最大值。只同本行内元素行高有关
3.3 行高的计算与继承 基数：元素本身的字体尺寸。。不带单位的缩放因子。。若含图片
3.4 浏览器的差别与错误：ie6 对含有图片或表单等可替换行内元素，行高失效
3.5 应用：当行文字在垂直方向居中
4 垂直对齐 vertical-align 不继承 行内和单元格table-cell
Text-top，super,sub，综合（垂直对齐和行框高度有关，行内框高度由行内元素的行内框有关）
4.3 奇怪的ie 6，7
4.4 文档类型与纯图片内容的垂直对齐
4.5 单元格的垂直对齐 表格是比较特殊的元素
5 单词间隔 字母间隔： 单词间隔以空格来判断
Word-spacing：继承 受文字对齐方式影响。浏览器不能判定文字的内容，故以空格为准
Letter-spacing：继承 受文字对齐。最后一个字排除
5.3 水平对齐的影响和继承
6 文本转换 text-transform 继承 capitalize不同浏览器不同
7 文本装饰 text-decoration 不继承。 Blink ，可多值，最后的会清除前面
8 空白 white-spac 不继承
Pre：所有不压缩。
pre-wrap：所有不压缩，同时保持内容自动回行，Css2.1
pre-line：空格，制表符被压缩，换行保留，同时自动。Css2.1
8.3 应用：显示不回行文本 no-wrap
9 文本阴影：text-shadow 不继承 css2新增，2.1又删
颜色 阴影水平延伸距离 阴影垂直 模糊效果的作用距离 仅仅发光：长度1，2为0.必选
10 文字方向 direction 继承 ltr，rtl，
编码方式 Unicode-bidi 继承 n，bidi-override,embed 与direction属性一起使用
只设定direction不会影响。必须unicode-bidi：embed 或 bidi-override
第8章框模型
盒模型：文档树中的元素都产生，。。。
视觉格式化模型（浮动、定位）：浏览器根据视觉格式模型，将这些框布局成访问者看到的
1 框模型 ie6，7 怪异的框模型
2 包含块 ：视觉格式化模型中的概念，与框模型类似。为它里面包含的元素提供参考
2.1 视口viewport：用户通过它来浏览文档。滚动机制。一个渲染区域最多一个视口
2.2 包含块
1，初始包含块：根元素，正常为html，不正确body，width属性指定，auto：视口。不呢个定位和浮动
2，其他，如果定位为:relative,static ,由最近的块级、单元格、行内块祖先元素的内容框创建
3，fixed，视口
5， absolute，最近非static
3 宽度：width 不继承 除了非替换的行内元素，表格行，行组
3.2 行内 ：非替换的不能。。图片，定宽不定高，等比例变化
百分比 基数：元素包含块的宽度。。 css1，ie5 父元素的内容框宽度 。。。溢出
4 最大宽度和最小宽度
5 高度 height 块级和替换元素生成的内容框的高度
5.2 行内元素的高度，，非替换行内元素的框高度由行高决定
6 最大高度和最小高度
7 补白 padding 除了表格的一些 不许负值
比分比基数： 上下左右，都是以包含块的宽度为基数，高度无关
8 边框 border 不继承 缩写
color，ie6没transparent,width，-style：dotted,dashed,solid,double,groove,ridge,inset,outet,none
8.7 应用：文字链接的装饰
9 边距 margin 表格标题，表格，行内表格有效，单元格（border-collapse,border-spacing）、表格行
9.2 垂直方向
1，行内元素：非替换的无效（水平有效，padding也有效），由行高决定
2，边距的重叠：1常规流向的块级—最大值。父元素设padding，border
2浮动元素 不重叠 。3overflow属性，不是visible，其后代不重叠
4绝对定位 不重叠，包括该元素和其后代之间
5行内快 不重叠 6根元素和其后代之间不重叠
9.3 百分比值边距 基数：包含块宽度 与高度无关
9.4 负值边距 （不同与padding）
9.5 应用：元素水平居中 margin:0 auto；负值可以使水平居中，但不可使垂直居中？？基数
10 常规流向中的视觉模型
常规流向（未定位—本节，相对定位）
视觉模型：知道浏览器如何生成元素框及如何显示。display决定框类型，部分影响它在视觉模型表现
10.1 块级元素的水平格式化
1定义了width 2width:auto,其他为0，尽量充满父元素 3左右auto 4边距负值
10.2 应用：宽度自适应的布局
10.3 垂直格式化 **有一页是黑的
1 overflow：visible ie6自动扩展高度以包含内容 2height和auto值，是否有任何块类子元素：如果值行内；如果包括块类子。。子浮动，绝对定位被忽略 3上下边距的auto-==0 4垂直方向的边距会发生重叠
10.4 应用：高度自适应浏览器窗口
百分比高度基数：包含块的高度。由于视口不为初始包含块提供高度让其适应文档的内容，故高度为明确定义，auto。。这是高度和宽度最重要的区别 html,body{height:100%
10.5 行内元素的格式化 p182
1，行内非替换元素
高度取决于元素行高，height无效，垂直方向的边框，补白不影响。。水平有边距，边框，补白，会随内容的的断裂而断开。
2，行内替换元素
1百分比内在尺寸 2表单的替换元素
（00：14）
2017.6.28 三 21：25
第9章浮动、定位与视觉格式化模型
1 视觉格式化模型控制框的生成
块框的生成（主，匿名，） 行内 插入（run-in）
2 显示类型：display 不继承
Ie7 不支持 inline-block
3 定位 position 不继承
3.2 设定框偏移：top、 定位元素
百分比：包含块的宽度 auto：
3.3 相对定位
3.4 绝对定位
Fixed，也是绝对定位，绝对定位的一个子类 ie6 不支持
P200
3.5 堆叠顺序 z-index 定位
堆叠容器 （和包含块没有必然联系），还同父元素的堆叠顺序有关
Ie 会为定位元素的z-index设为0。。。。。不会出现：子元素 永远由父元素决定
3.6 ie中的position
Text-align与定位，ie6 的问题，
3.7 应用：显示提示内容
4 浮动与清除 不 除了绝对（绝对，和fixed），display：none
Ie6扩展父元素的高度以包含子；与相同方向浮动 双倍边距；
多浮动，混合组合，，浏览器表现不一
4.3 清除浮动：clear 块级
清除本元素 前面 的浮动影响 不会对后代影响
本元素内的子元素清除，对本元素有影响，而且和本元素是否浮动有关
4.4 应用：3行3列布局设计
#footer—clear：both 为content添加下边据，而不是footer添加上边距
5 display、float和position
6 溢出和剪切
6.1 overflow： 不 块和替换元素 ie6扩展元素框以包含内容
6.2 clip 不 绝对定位 允许负值
6.3 两者关系
7 可视性 visibility 继承
Collapse 表格的行、列（组）上
7.2 应用：显示及隐藏元素
（22：07）
